<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 合并就删除 -->
    <script src="../../lib/JQuery/jquery-1.11.3.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <!-- 数据 -->
    <!-- <script src="../../js/sysmgmt(系统管理-角色管理).js"></script> -->
    <link rel="stylesheet" href="../../src/font/font_shy/iconfont.css" />
    <title>疾病管理</title>
    <link rel="stylesheet" href="../../css/sysmgmt(系统管理-角色管理).css" />
    <link rel="stylesheet" href="../../css/disease.css">
  </head>
  <body>
    <div class="container-fluid" id="box">
      <!-- 查询 -->
      <div class="row" style="margin: 30px 0;">
        <div class="col-lg-4">
          <input class="searchInput" type="text" placeholder="请输入疾病名称">
          <button class="searchBtn" type="submit"><span class="iconfont icon-chaxun"></span>&nbsp;查询</button>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="row">
        <div class="col-lg-6">
          <button class="addDiseaseBtn" type="button" data-toggle="modal" data-target=".addMode">+&nbsp;新增疾病</button>
          <button class="daochuBtn" type="submit"><span class="iconfont icon-daochu"></span>&nbsp;导出</button>
          <button class="daoruBtn" type="submit"><span class="iconfont icon-daoru"></span>&nbsp;导入</button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="row">
        <table>
        <tbody id="tbodyDiseaseList">
          <!-- 删除模态框 -->
          <div class="delMode modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="clear modal-content">
                  <div>
                    <h3>删除疾病</h3>
                    <hr>
                  </div>
                    <p>确认删除后，角色将被彻底删除，对应人员所属角色清空</p>
                    <!-- 返回按钮 -->
                    <div style="float: right;">
                      <button type="button" class="quxiaoshanchu btn btn-default" data-dismiss="modal">取消</button>
                      <button class="quedingshanchu"  type="button" class="btn btn-default" data-dismiss="modal">确认</button>
                    </div>
                </div>
            </div>
          </div>
          <tr>
            <th><input type="checkbox" name="" id="checkall"><span>ID</span></th>
            <th>疾病名称</th>
            <th>变更时间</th>
            <th>排序值</th>
            <th>操作</th>
          </tr>
        </tbody>
      </table>
      </div>
      <!-- 底部页功能 -->
      <div class="row">
        <div class="pageBox col-lg-offset-4 col-lg-8">
          <!-- pageBox1:共多少页,选一页多少条 -->
          <div class="pageBox1 col-lg-4 col-md-4 col-sm-4">
            <span>共</span>
            <!-- pageBox1-1共多少条 -->
            <span></span>
            <span>条</span>
            <!-- pageBox1-2选一页多少条 -->
            <select class="pageBox1-2 form-control" onchange="PageBox12(this)">
              <option value="5" onclick="pageBox12a(this)">5条/页</option>
              <option value="10" onclick="pageBox12a(this)">10条/页</option>
            </select>
          </div>
          <!-- pageBox2:页码 -->
          <div class="pageBox2 col-lg-4 col-md-4 col-sm-4">
            <!-- 上一页prePage -->
            <span class="prePage iconfont icon-xiangzuo"></span>
            <!-- 页码集 -->
            <div class="pageDiv"></div>
            <!-- 下一页nextPage -->
            <span class="nextPage iconfont icon-xiangyou"></span>
          </div>
          <!-- pageBox3:前往+跳转 -->
          <div class="pageBox3 col-lg-4 col-md-4 col-sm-4">
            <span>前往</span>
            <div class="col-sm-5">
              <!-- 跳转输入框pageBox3-1 -->
              <input type="text" class="form-control" id="pageBox3-1" placeholder="1" />
            </div>
            <span>页</span>
            <!-- 页面跳转按钮pageBox3-1Btn -->
            <span class="pageBox3-1Btn">&nbsp;跳转</span>
          </div>
        </div>
      </div>
      
    </div>
    <!-- 模态框 -->
    <!-- 编辑模态框 -->
    <div class="editMode modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <h3 style="margin-left: 30px">编辑疾病</h3>
              <hr/>
              <div>
                <form class="clear form-horizontal">
                  <div class="form-group">
                    <label for="jbmc" class="col-sm-2 control-label">疾病名称:</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="jbmc" placeholder="" disabled="disabled"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="jbjj" class="col-sm-2 control-label">疾病简介:</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="jbjj" placeholder="" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="zzbx" class="col-sm-2 control-label">症状表现:</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="zzbx" placeholder="" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="bzzd" class="col-sm-2 control-label">病症诊断:</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="bzzd" placeholder="" />
                    </div>
                  </div>
                  <hr>
                  <div style="float: right;">
                    <button type="button" class="quxiaoedit btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="quedingedit btn btn-default" data-dismiss="modal">保存</button>
                  </div>
              
                </form>
              </div>
            </div>
        </div>
    </div>
    <!-- 新增模态框 -->
    <div class="addMode modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <h3 style="margin-left: 30px">新增疾病</h3>
            <hr/>
            <div>
              <form class="clear form-horizontal">
                <div class="form-group">
                  <label for="jbmc" class="col-sm-2 control-label">疾病名称:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="jbmc" placeholder="" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="jbjj" class="col-sm-2 control-label">疾病简介:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="jbjj" placeholder="" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="zzbx" class="col-sm-2 control-label">症状表现:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="zzbx" placeholder="" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="bzzd" class="col-sm-2 control-label">病症诊断:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="bzzd" placeholder="" />
                  </div>
                </div>
                <hr>
                <div style="float: right;">
                  <button type="button" class="quxiaoadd btn btn-default" data-dismiss="modal">取消</button>
                  <button type="button" class="quedingadd btn btn-default" data-dismiss="modal">保存</button>
                </div>
            
              </form>
            </div>
          </div>
      </div>
  </div>
    
    <script>
      let diseaseList=[
        {id:1,diseaseName:'近视',changTime:'2022-10-10 12:00:00',sort:99,introduction:'这里是一段关于近视的简介说明',symptoms:'这里是一段专门介绍近视症状的表现内容',diagnosis:'这里是一段关于病症诊断的内容介绍'},
        {id:2,diseaseName:'乙肝',changTime:'2022-10-10 12:00:00',sort:98,introduction:'这里是一段关于乙肝的简介说明',symptoms:'这里是一段专门介绍近视症状的表现内容',diagnosis:'这里是一段关于病症诊断的内容介绍'},
        {id:3,diseaseName:'白血病',changTime:'2022-10-10 12:00:00',sort:97,introduction:'这里是一段关于白血病的简介说明',symptoms:'这里是一段专门介绍近视症状的表现内容',diagnosis:'这里是一段关于病症诊断的内容介绍'},
        {id:4,diseaseName:'高血压',changTime:'2022-10-10 12:00:00',sort:96,introduction:'这里是一段关于高血压的简介说明',symptoms:'这里是一段专门介绍近视症状的表现内容',diagnosis:'这里是一段关于病症诊断的内容介绍'},
        {id:5,diseaseName:'糖尿病',changTime:'2022-10-10 12:00:00',sort:95,introduction:'这里是一段关于糖尿病的简介说明',symptoms:'这里是一段专门介绍近视症状的表现内容',diagnosis:'这里是一段关于病症诊断的内容介绍'},
        {id:6,diseaseName:'低血压',changTime:'2022-10-10 12:00:00',sort:94,introduction:'这里是一段关于低血压的简介说明',symptoms:'这里是一段专门介绍近视症状的表现内容',diagnosis:'这里是一段关于病症诊断的内容介绍'},
        {id:7,diseaseName:'心脏病',changTime:'2022-10-10 12:00:00',sort:93,introduction:'这里是一段关于心脏病的简介说明',symptoms:'这里是一段专门介绍近视症状的表现内容',diagnosis:'这里是一段关于病症诊断的内容介绍'},
        {id:8,diseaseName:'甲状腺肿大',changTime:'2022-10-10 12:00:00',sort:92,introduction:'这里是一段关于甲状腺肿大的简介说明',symptoms:'这里是一段专门介绍近视症状的表现内容',diagnosis:'这里是一段关于病症诊断的内容介绍'},
        {id:9,diseaseName:'低血糖',changTime:'2022-10-10 12:00:00',sort:91,introduction:'这里是一段关于低血糖的简介说明',symptoms:'这里是一段专门介绍近视症状的表现内容',diagnosis:'这里是一段关于病症诊断的内容介绍'},
      ]
      let dangqianyeData = [];
      let dangqianyePage = 1; //当前是多少页
      let a = parseInt($(".pageBox1-2 option:selected").val());
      let maxPage = Math.ceil(diseaseList.length / a); //pagediv做了之后放进去
      let searchArr = [];
      // let delId=0
      $(".addBtn").click(function () {
        $(this).css({ backgroundColor: "#555a5d" });
      });
      console.log(diseaseList);
      showData(diseaseList, 1, a);
      showPage(diseaseList);

      function showDiseaseList(data) {
        console.log("现在是第" + dangqianyePage + "页");
        console.log("最大页是" + maxPage + "页");
        $(".trDiseaseList").html("");
        for (let i = 0; i < data.length; i++) {
          $("#tbodyDiseaseList").append(`
                <tr class="trDiseaseList">
                    <td class="checkId"><input type="checkbox" name="checkId">${data[i].id}</td>
                    <td>${data[i].diseaseName}</td>
                    <td>${data[i].changTime}</td>
                    <td>${data[i].sort}</td>
                    <td>
                        <span class="editBtn" onclick='edit(${JSON.stringify(data[i])})' style="cursor: pointer;" type="button" data-toggle="modal"  data-target=".editMode">编辑</span>
                        <span class="delBtn" data-del='${JSON.stringify(data[i].id)}' style="cursor: pointer;" type="button" data-toggle="modal" data-target=".delMode">删除</span>
                    </td>
                </tr>
          `);
        }
      }
      // 选择一页显示多少数据
      function PageBox12(thisObj) {
        a = parseInt($(".pageBox1-2 option:selected").val());
        console.log(a);
        showData(diseaseList, 1, a);
        showPage(diseaseList);
      }
      function showData(data, pageNum, aa) {
        let firstData = (pageNum - 1) * aa;
        dangqianyeData = data.slice(firstData, firstData + aa);
        console.log(firstData);
        showDiseaseList(dangqianyeData);
        // 点击页码的样式
        // 令当前页的页码改变
        dangqianyePage = pageNum;
      }
      // 上一页
      $(".prePage").click(function () {
        if (dangqianyePage > 1) {
          dangqianyePage -= 1;
          showData(diseaseList, dangqianyePage, a);
          showPage(diseaseList);
        }
      });
      $(".nextPage").click(function () {
        maxPage = Math.ceil(diseaseList.length / a)
        if (dangqianyePage < maxPage) {
          dangqianyePage += 1;
          showData(diseaseList, dangqianyePage, a);
          showPage(diseaseList);
        }
      });
      //   页码
      function showPage(data) {
        $(".pageBox1").children().eq(1).html('');
        $(".pageBox1").children().eq(1).append(`${data.length}`);
        let zuoPage = dangqianyePage;
        let eqPage = (dangqianyePage % a) - 1;
        $(".page").eq(eqPage).addClass("active");
        $(".page").eq(eqPage).siblings().removeClass("active");
        if (zuoPage == 1 || zuoPage % a == 1) {
          $(".pageDiv").html("");
          for (let i = zuoPage; i <= zuoPage + 4; i++) {
            $(".pageDiv").append(`<div class="page">${i}<div>`);
          }
          $(".page").eq(0).addClass("active");
          $(".page").eq(0).siblings().removeClass("active");
        }
      }
      $(".page").click(function () {
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        dangqianyePage = parseInt($(this).text());
        showData(diseaseList, dangqianyePage, a);
        showPage(diseaseList)
      });
      
      // 输入页面跳转
      $(".pageBox3-1Btn").click(function () {
        let shuruyema = $("#pageBox3-1").val();
        dangqianyePage = shuruyema;
        showData(diseaseList, dangqianyePage, a);
        showPage(diseaseList)
      });
      // 全选
      $("#checkall").click(function () {
        if (this.checked) {
          $("input[name='checkId']").each(function () {
            this.checked = true;
          });
        } else {
          $("input[name='checkId']").each(function () {
            this.checked = false;
          });
        }
      });
      // 查询
      $('.searchBtn').click(function() {
        search()
      })
      function search() {
        searchArr = [...diseaseList]
        // console.log(searchArr);
        let name=$('.searchInput').val()//输入的内容
        for(let i=0;i<searchArr.length;i++){
          if(name!=searchArr[i].diseaseName){
            searchArr.splice(i, 1);
            i--;
          }
        }
        // 输出searchArr
        showData(searchArr, dangqianyePage, a);
        showPage(searchArr);
      }
      // 导出
      $('.daochuBtn').click(function(){
        daochu(diseaseList)
      })
      function daochu(data) {
        let daochuArr=[]
        $("input[name='checkId']:checked").each(function(){
          daochuArr.push(parseInt($(this).parent().text()))
        })
        for(let i=0;i<data.length;i++){
          if(daochuArr[i]==data[i].id){
            console.log(data[i]);
            $('#box').append(`<p class="daochuContent">${data[i].id}${data[i].diseaseName}${data[i].changTime}${data[i].sort}</p>`)
          }
        }
      }

      // 删除
      function delData(delid) {
        // console.log(delid);//取到
        for (let i = 0; i < diseaseList.length; i++) {
          if (diseaseList[i].id == delid) {
            // console.log('进if');
            diseaseList.splice(i, 1);
          }
        }
        showPage(diseaseList);
        showData(diseaseList, dangqianyePage,a);
      }
      $("#tbodyDiseaseList").on("click", ".delBtn", function () {
        let id = $(this).attr("data-del");
        // console.log(id);//取到
        $(".quedingshanchu").click(function () {
          // console.log(id);//取到
          delData(id);
        });
      });
      // 编辑
      function edit(editData){
        // 疾病名称
        $('.editMode #jbmc').val(editData.diseaseName)
        //疾病简介
        $('.editMode #jbjj').val(editData.introduction)
        //症状表现
        $('.editMode #zzbx').val(editData.symptoms)
        //病症诊断
        $('.editMode #bzzd').val(editData.diagnosis)
      }
      $('.quedingedit').click(function () {
        let editjbmc=$('.editMode #jbmc').val()
        let editjbjj=$('.editMode #jbjj').val()
        let editzzbx=$('.editMode #zzbx').val()
        let editbzzd=$('.editMode #bzzd').val()
        let editContent={
          diseaseName:editjbmc,
          introduction:editjbjj,
          symptoms:editzzbx,
          diagnosis:editbzzd
        }
        for(let i = 0;i<diseaseList.length;i++){
        if(editContent.diseaseName==diseaseList[i].diseaseName){
          diseaseList[i].diseaseName = editContent.diseaseName
          diseaseList[i].introduction = editContent.introduction
          diseaseList[i].symptoms = editContent.symptoms
          diseaseList[i].diagnosis = editContent.diagnosis
        }
      }
      showData(diseaseList,dangqianyePage,a)
      showPage(diseaseList)
      })
      // 新增
      $('.quedingadd').click(function(){
        let addjbmc=$('.addMode #jbmc').val()
        let addjbjj=$('.addMode #jbjj').val()
        let addzzbx=$('.addMode #zzbx').val()
        let addbzzd=$('.addMode #bzzd').val()
        let addContent={
          id:diseaseList.length+1,
          diseaseName:addjbmc,
          changTime:'2022-10-10 12:00:00',
          sort:99-diseaseList.length,
          introduction:addjbjj,
          symptoms:addzzbx,
          diagnosis:addbzzd
          }
      diseaseList.push(addContent)
      // console.log(diseaseList);
      maxPage = Math.ceil(diseaseList.length / a)
      showData(diseaseList,maxPage,a)
      showPage(diseaseList)
    })
    </script>
  </body>
</html>